<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>myChart</title>
    <style>
    .main {
      position: relative;
    }

    .main .year {
      position: absolute;
      text-align: center;
      width: 100%;
      font-weight: 900;
      color: skyblue;
      opacity: 0.5;
      margin: 0;
      text-shadow: -5px 5px 5px #888888;
    }

    #myChart {
      margin: 0 auto;
    }



    </style>
    <script src="./echart/echarts.common.min.js"></script>
</head>

<body>
<div class="main">
    <p class="year" id="year"></p>
    <div id="myChart"></div>
</div>
</body>

</html>
<script>
  var myChart = document.getElementById("myChart");
  var year = document.getElementById("year");

  function createChart() {
    myChart.style.width = (screen.width - 20) + "px";
    myChart.style.height = Math.floor((screen.width - 20) * 0.8) + "px";
    year.style.fontSize = Math.floor(screen.width / 5) + "px";
    year.style.lineHeight = myChart.style.height;
    return echarts.init(myChart);
  }
  var newChart = createChart();
  var options = {
   title: {
      text: "氨氮指标统计图"
    },
    color: ["#ff4064", "#538cff"],
    legend: {
      data: ["最大值", "最小值"],
      right: 28
    },
    xAxis: {
      type: "category",
      splitLine: {
        show: true
      },

    },
    yAxis: {
      type: "value",
      // min: 280,
      // max: 310
    },
    series: [{
        type: "line",
        smooth: true,
        name: "最大值",
        itemStyle: {
          normal: {
            label: {
              show: true,
              color: "#fff",
              backgroundColor: "#ff4064",
              padding: [2, 3],
              borderRadius: 4
            }
          }
        }
      },
      {
        type: "line",
        smooth: true,
        name: "最小值",
        itemStyle: {
          normal: {
            label: {
              show: true,
              position: "bottom",
              color: "#fff",
              backgroundColor: "#538cff",
              padding: [2, 3],
              borderRadius: 4
            }
          }
        }
      }
    ]
  }
  newChart.setOption(options);

  function drawChart(val) {
    alert(val);
    var data = JSON.parse(val);
    // 获取x轴日期
    var today = new Date();
    year.innerText = today.getFullYear();
    var week = [];
    var month = today.getMonth() + 1;
     for (var i = 0; i < 7; i++) {
      var day = new Date(today.getTime() - 1000 * 60 * 60 * 24 * i).getDate();
      day = day < 10 ? ("0" + day) : day
      var date = month + "-" + day;
      week.unshift(date);
    }
    // 获取y轴最大值和最小值
    var arr = data.max.concat(data.min);
    arr.sort(function (a, b) {
      return a - b;
    })
    var min = arr[0] - 10;
    var max = arr[arr.length - 1] + 10;
    // 设置echarts图表数据
    newChart.setOption({
        title: {
        text:data.title
       },
      xAxis: {
        data: week
      },
      yAxis: {
        min: min,
        max: max
      },
      series: [{
          data: data.max
        },
        {
          data: data.min
        }
      ]
    });
  }
 drawChart('{"max":[0,0,0,0,0,0,0],"min":[0,0,0,0,0,0,0]}');



</script>